import { Button, Modal } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { marketingApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'

export default defineComponent({
  name: 'SelectJfGoods',
  props: {
    filterIds: { type: [Array], default: [] as number[] }
  },
  emits: ['select'],
  setup(props, { emit }) {
    const tableRef = ref({} as ProTableRef)
    const showGoodsDlg = ref(false)
    const tableConfig = ref({
      fixedHeight: 600,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '商品名称',
              field: 'keyword',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  allowClear: true,
                  placeholder: '请输入'
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '商品ID',
            field: 'id',
            minWidth: 150
          },
          {
            title: '商品名称',
            minWidth: 150,
            field: 'goodsName'
          },
          {
            title: '规格数',
            minWidth: 150,
            field: 'specNum'
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await marketingApi.getExchangeCommodityList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                status: 1,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //显示选择框
    function show() {
      showGoodsDlg.value = true
    }

    //确定
    function confirm(row) {
      emit('select', row)
      showGoodsDlg.value = false
    }

    return {
      tableRef,
      tableConfig,
      showGoodsDlg,
      show,
      confirm
    }
  },
  render() {
    return (
      <div>
        <Modal
          v-model:visible={this.showGoodsDlg}
          title="商品选择"
          destroyOnClose
          width={900}
          footer={null}
        >
          <ProTable
            ref="tableRef"
            v-slots={{
              operation: ({ row }) => {
                return (
                  <Button
                    disabled={
                      this.filterIds?.findIndex(item => row.id == item) != -1
                    }
                    type="link"
                    size="small"
                    onClick={() => this.confirm(row)}
                  >
                    确定
                  </Button>
                )
              }
            }}
            {...this.tableConfig}
          />
        </Modal>
      </div>
    )
  }
})
